html,body{
    height: 100%;
}
*{margin: 0;padding: 0;}ul{list-style: none;}
body{
    display: flex;
    flex-direction: column;

}
// 轮播图
.slideshow{
    width: 100%;
    height: 200px;
    background-color: rgb(126, 15, 15);
}
.slideshow-ul li img{
    width: 100%;
    height: 200px;
    display: none;
}
// 主体
.bodys{
    display: flex;
     flex-direction:row ;
    flex-wrap: wrap;
    justify-content: space-between;
    width: 100%;
    padding: 4%;
    flex: 1;
    overflow-y:scroll;
    
}
// 主体里的子盒子
.mb10{margin-bottom: 10px;}
.br15{border-radius: 15px}
// 排名
.ranking{
    width: 150px;
    height: 150px;
     background-color: rgb(84, 175, 217);
    background-image: url("../img/index-card-rank.png");
    background-position: -5% 90%;
    background-size: 60% 60%;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
.ranking p{
    display:block;
    float: right;
    margin-top: 30px;
    width: 70px;
    font-size: 80px;
    color: #fff;
}
// 打卡
.pcc{
    width: 210px;
    height: 150px;
    background-color: rgb(158, 218, 247);
    background-image: url("../img/index-card-sum.png");
    background-position: 15% 80%;
    background-size: 60% 70%;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
.pcc span{
    display:block;
    width: 70px;
    height: 30px;
    border-radius: 15px;
    border: 2px solid black;
    margin-top: 70px;
    margin-left: 110px;
    padding: 5px;
    font-size: 14px;
    font-weight: 600;
    user-select: none;
}

// 运动
.medal{
    width: 180px;
    height: 110px;
    background-color: rgb(114, 107, 107);
    background-image: url("../img/index-card-data.png");
    background-size: 100% 100%;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    color: #fff;
}
// 勋章
.exercise-data{
    width: 185px;
    height: 110px;
    background-color: rgb(157, 189, 227);
    background-image: url("../img/index-card-badge.png");
    background-position: 15% 80%;
    background-size: 60% 70%;
    background-repeat: no-repeat;
    padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
}
.exercise-data p{
    display:block;
    float: right;
    margin-top: 10px;
    margin-right: 20px;
   font-size: 60px;
   color: rgb(68, 65, 65);
}
.exercise-data p span{
    float: right;
    margin-top: 25px;
    font-size: 30px;
    color: rgb(68, 65, 65);
}
// 课程
.course{
    width: 100%;
    height: 110px;
    background-color: rgb(22, 34, 146);
    background-image: url("../img/index-swiper-bg2.jpg");
   background-size: 100% 100%;
   padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    color: #fff;
}
// 户外跑步
.running{
    width: 100%;
    height: 110px;
    background-color: rgb(16, 109, 104);
     background-image: url("../img/index-card-run.png");
     background-size: 100% 100%;
     padding-left: 10px;
    padding-top: 10px;
    box-sizing: border-box;
    color: #fff;
}



// 页脚
.footer{
    width: 100%;
    height: 70px;
    padding:2% 4%;
 
}
.footer-ul{
    display: flex;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    

}
.footer-ul li{
    width: 60px;
    height: 100%;
    text-align: center;
    color: rgb(75, 74, 74);
}
.footer-ul li:nth-of-type(1){color: rgb(71, 145, 230);}
.footer-ul li span{
    display: block;
  font-size: 30px;
}